<template>
  <div class="line1">
    <div
      :id='id'
      :data='data'
      style="width: 90%;height:450px;"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.initData(this.id, this.data);
  },
  props: {
    id: {
      type: String,
      default: "line"
    },
    data: {
      type: Object,
      default: {}
    }
  },
  methods: {
    initData(id, data) {
      if (data) {
        let _this = this;
        let moduleChart = document.getElementById(id);
        this.myChart = this.$echarts.init(moduleChart);
        this.myChart.setOption(data);
        window.addEventListener("resize", () => {
          _this.myChart.resize();
        });
      }
    }
  },
  watch: {
    data: {
      handler() {
        this.initData(this.id, this.data);
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.clear();
    }
  }
};
</script>

<style lang="less">
.line1 {
  display: flex;
  justify-content: center;
}
</style>
